{{ define "gallery" }}
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>GLSL Sandbox Gallery</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			body {
				background-color: #000000;
				color: #888;
				font: 13px Arial, Helvetica, sans-serif;
				line-height: 1.6;
				padding: 40px;
			}
			a {
				color: #009DE9;
				text-decoration: none;
			}
			a:hover {
				color: #FFF;
			}
			h1 {
				color: #FFF;
				margin-top: 0px;
				margin-bottom: 20px;
			}
			h1, h1 a {
				color: #FFF;
				font: 28px Arial, Helvetica, sans-serif;
			}
			button {
				background-color: #009DE9;
				border: none;
				color: #000000;
				cursor: pointer;
				padding: 6px 10px;
				border: 0px;
				border-radius: 4px;
				font-size: 12px;
				text-transform: uppercase;
			}
			button:hover {
				background-color: #FFF;
			}
			#github {
				fill: #009DE9;
				margin-left: 8px;
				margin-bottom: -2px;
			}
				#github:hover {
					fill: #FFF
				}
			#gallery {
				width: 100%;
				margin-top: 2em;
				margin-bottom: 2em;
			}
			#gallery>a {
				border: none;
			}
			#gallery img {
				width: 200px;
				height: 100px;
				background-color: #222;
				border: 1px solid #222;
				border-radius: 4px;
			}
			#gallery img:hover {
				border: 1px solid #FFF;
			}
			.effect {
				display: inline-block;
				margin-right: 4px;
				margin-bottom: 4px;
			}
			form {
				margin-bottom: 2em;
			}
			label {
				margin-top: 1.4em;
				margin-bottom: 0.6em;
				font-size: 14px;
				color: #009DE9;
			}
			input, textarea {
				background: #222;
				font-size: 14px;
				color: #ccc;
				border: none;
				padding: 5px 10px;
				outline: none;
				cursor: pointer;
			}
			input[type=submit]:hover {
				color: #009DE9;
			}
		</style>
		<script>function $(id,m){document.getElementById(id).style.display= m?'block':'none';}</script>
	</head>
	<body>

<h1><a href="/" style="text-transform:uppercase">GLSL Sandbox</a> <a href="https://github.com/mrdoob/glsl-sandbox"><svg id="github" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-4.466 19.59c-.405.078-.534-.171-.534-.384v-2.195c0-.747-.262-1.233-.55-1.481 1.782-.198 3.654-.875 3.654-3.947 0-.874-.312-1.588-.823-2.147.082-.202.356-1.016-.079-2.117 0 0-.671-.215-2.198.82-.64-.18-1.324-.267-2.004-.271-.68.003-1.364.091-2.003.269-1.528-1.035-2.2-.82-2.2-.82-.434 1.102-.16 1.915-.077 2.118-.512.56-.824 1.273-.824 2.147 0 3.064 1.867 3.751 3.645 3.954-.229.2-.436.552-.508 1.07-.457.204-1.614.557-2.328-.666 0 0-.423-.768-1.227-.825 0 0-.78-.01-.055.487 0 0 .525.246.889 1.17 0 0 .463 1.428 2.688.944v1.489c0 .211-.129.459-.528.385-3.18-1.057-5.472-4.056-5.472-7.59 0-4.419 3.582-8 8-8s8 3.581 8 8c0 3.533-2.289 6.531-5.466 7.59z"/></svg></a></h1>
gallery by <a href="https://twitter.com/thevaw">@thevaw</a>, <a href="https://twitter.com/feiss">@feiss</a> and
<a href="https://twitter.com/mrdoob">@mrdoob</a><br/>
editor by <a href="https://twitter.com/mrdoob">@mrdoob</a>, <a href="https://twitter.com/mrkishi">@mrkishi</a>, <a href="https://twitter.com/p01">@p01</a>, <a href="https://twitter.com/alteredq">@alteredq</a>, <a href="https://twitter.com/kusmabite">@kusmabite</a> and <a href="https://twitter.com/emackey">@emackey</a>
<br/><br/>
<a href="/e"><button>new shader</button></a>
<div id="gallery">

{{ if .Admin }}
<form action="/admin" method="GET">
	<label style="color:#009DE9" for="parent">Effect ID</label>
	<input type="text" id="parent" name="parent">
	<input type="submit" value="Submit">
</form>
<form action="/admin" method="POST">
	<input type="hidden" id="page" name="page" value="{{ .Page }}">
{{ end }}

{{ $admin := .Admin }}

{{ range .Effects }}
	<div class="effect">
		<a href='/e#{{ .ID }}.{{ .Version }}'><img src='{{ .Image }}'></a>
		{{ if $admin }}
		{{ $name := checkboxID .ID }}
		<div>
		<a style="color:#009DE9;" href="/admin?parent={{ .ID }}">Children</a>
		<label style="color:#009DE9" for="{{ $name }}">Hidden</label>
		<input type="checkbox" id="{{ $name }}" name="{{ $name }}" {{ checked .Hidden }}>
		<input type="hidden" name="effects" value="{{ .ID }}">
		</div>
		{{ end }}
	</div>
{{ end }}

{{ if .Admin }}
	<input type="submit" value="Submit">
</form>
{{ end }}

</div>

<div id="paginate">
{{ if .IsPrevious }}
<a href='{{ .PreviousPage }}'><button>Previous page</button></a>

{{ if .IsNext }}
&nbsp;&nbsp;
{{ end }}

{{ end }}

{{ if .IsNext }}
<a href='{{ .NextPage }}'><button>Next page</button></a>
{{ end }}
</div>

</body>
</html>
{{ end }}
